<script>
import "../../assets/info.css";
import { useUserStore } from "../../stores/user";
import { mapStores } from "pinia";
import axios from "../../api/axios.config";
import util from "../../api/util";
export default {
  name: "InfoView",
  data() {
    return {
      user: {
        avatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        nickname: null,
        userName: null,
        joinDate: null,
        level: "普通用户",
        studentId: null,
        realName: null,
        phone: null,
        email: null,
        userId: null,
      },
      visible: false,
      fileList: [],
      imgNames: null,
    };
  },
  methods: {
    showPanel() {
      this.visible = !this.visible;
      console.log(this.visible);
    },
    handleSubmit() {
      // 这里添加提交逻辑，例如：
      this.visible = false;
      this.userStore;
      let datas = {
        nickname: this.user.nickname,
        student_id: this.user.studentId,
        real_name: this.user.realName,
        phone: this.user.phone,
        user_id: this.user.userId,
      };
      console.log("###################");
      console.log(datas);
      console.log("###################");
      axios.put("/users/update", datas).then((res) => {
        let result = res.data.data.info.session.user;
        result = util.jsonTransfer(result);
        this.userStore.setInfo(result);
        if (res.data.code === 200) this.$message.success("信息更新成功");
      });
    },
    handleSuccess(res) {
      this.imgNames = res.data;
      this.subImg(this.user.userId);
    },
    handleError(err, file, fileList) {
      console.log(err, file, fileList);
      this.$message.error("上传失败：" + err.message);
    },
    // 新增：处理文件数量超限
    subImg(user_id) {
      console.log(this.imgNames);
      let url = "http://127.0.1:3006/images/avatar/" + this.imgNames;
      let datas = {
        user_id: user_id,
        url: url,
      };
      axios.put("/users/avatar", datas).then((res) => {
        console.log(res);
        let result = res.data.data.info.session.user;
        result = util.jsonTransfer(result);
        this.userStore.setInfo(result);
        if (res.data.code === 200){
          this.$message.success("信息更新成功");
          this.user.avatar = url;
        };
        this.imgNames = null;
        this.fileList = [];
      });
    },
  },
  mounted() {
    // 修改为直接更新 user 对象的属性
    console.log(this.userStore.avatarUrl);
    this.user.avatar = this.userStore.avatarUrl;
    this.user.userId = this.userStore.userId;
    this.user.nickname = this.userStore.nickname;
    this.user.userName = this.userStore.username;
    this.user.joinDate = util.getTime(this.userStore.createdAt);
    this.user.level = "普通用户";
    this.user.studentId = this.userStore.studentId;
    this.user.realName = this.userStore.realName;
    this.user.phone = this.userStore.phone;
    this.user.email = this.userStore.email;
    this.user.level = this.userStore.role === 2 ? "管理员" : "普通用户";
  },
  computed: {
    ...mapStores(useUserStore),
  },
};
</script>

<template>
  <div class="app-container">
    <header>
      <h1>用户信息中心</h1>
    </header>
    <div class="container">
      <el-card class="user-card" shadow="hover">
        <div class="user-header">
          <el-upload
            action="/upfile"
            v-model:file-list="fileList"
            show-file-list="false"
            :data="{ dir: 'avatar' }"
            name="imgfile"
            :on-success="handleSuccess"
            :on-error="handleError"
            :multiple="true"
          >
            <el-avatar :size="100" :src="user.avatar" class="avatar" @click="upAvatar" />
          </el-upload>

          <div class="user-info">
            <h2 class="title">{{ user.nickname }}</h2>
            <el-tag type="warning" class="level-tag">{{ user.level }}</el-tag>
          </div>
        </div>
        <div class="user-details">
          <el-divider />
          <div class="info-item">
            <span>用户名：{{ user.userName }}</span>
          </div>
          <el-divider />
          <div class="info-item">
            <span>注册日期：{{ user.joinDate }}</span>
          </div>
          <el-divider />
          <div class="info-item">
            <span>姓名：{{ user.realName }}</span>
          </div>
          <el-divider />
          <div class="info-item">
            <span>学号：{{ user.studentId }}</span>
          </div>
          <el-divider />
          <div class="info-item">
            <span>邮箱：{{ user.email }}</span>
          </div>
          <el-divider />
          <div class="info-item">
            <span>电话：{{ user.phone }}</span>
          </div>
          <div class="info-actions">
            <el-button type="danger" plain @click="showPanel">编辑资料</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
  <!-- <el-drawer v-model="this.visible" :show-close="false" size="40%" :with-header=false>
    This is drawer content.
  </el-drawer> -->
  <el-drawer v-model="visible" :show-close="false" size="40%" :with-header="false">
    <el-form :model="user" label-width="80px" class="drawer-form">
      <!-- 禁用字段 -->
      <el-form-item label="用户名">
        <el-input v-model="user.userName" disabled></el-input>
      </el-form-item>

      <el-form-item label="注册日期">
        <el-input v-model="user.joinDate" disabled></el-input>
      </el-form-item>

      <!-- 可编辑字段 -->
      <el-form-item label="昵称">
        <el-input v-model="user.nickname" clearable></el-input>
      </el-form-item>

      <el-form-item label="学号">
        <el-input v-model="user.studentId" clearable></el-input>
      </el-form-item>

      <el-form-item label="真实姓名">
        <el-input v-model="user.realName" clearable></el-input>
      </el-form-item>

      <el-form-item label="手机号">
        <el-input v-model="user.phone" clearable></el-input>
      </el-form-item>

      <el-form-item label="邮箱">
        <el-input v-model="user.email" clearable></el-input>
      </el-form-item>

      <!-- 操作按钮 -->
      <div class="drawer-footer">
        <el-button type="primary" @click="handleSubmit">保存修改</el-button>
        <el-button @click="visible = false">取消</el-button>
      </div>
    </el-form>
  </el-drawer>
</template>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
  background: linear-gradient(135deg, #1e88e5, #90caf9, #e3f2fd);
}

header {
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 20px 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* 重点修改：增强标题辨识度 */
h1 {
  font-size: 36px;
  margin-bottom: 10px;
  color: white; /* 改为纯白色 */
  font-weight: 700;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4),
    /* 深色阴影提升可读性 */ 0 4px 10px rgba(0, 0, 0, 0.2); /* 更明显的阴影效果 */
  position: relative; /* 为装饰线做准备 */
  padding-bottom: 10px; /* 添加底部空间 */
}

/* 添加装饰线增强视觉效果 */
h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0));
  border-radius: 2px;
}

.container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 0; /* 增加上下内边距 */
  margin: 0;
}

.user-header {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
}

.user-info {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
}

.avatar {
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.4);
  border: 3px solid white;
}

.title {
  font-size: 26px;
  color: #1565c0;
  margin-bottom: 8px;
}

.level-tag {
  font-size: 14px;
  padding: 6px 15px;
  background-color: #2196f3;
  color: white;
  border: none;
  align-self: flex-start;
}

.user-card {
  width: 95%;
  max-width: 600px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(5px);
  box-shadow: 0 10px 30px rgba(33, 150, 243, 0.3);
  padding: 25px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.user-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(33, 150, 243, 0.4);
}

.info-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.el-button--danger {
  background-color: #2196f3 !important;
  border-color: #2196f3 !important;
  color: white !important;
}

.el-button--danger:hover {
  background-color: #0d47a1 !important;
  border-color: #0d47a1 !important;
}

@media (max-width: 768px) {
  h1 {
    font-size: 28px;
    text-shadow:
      0 1px 3px rgba(0, 0, 0, 0.4),
      0 2px 5px rgba(0, 0, 0, 0.2);
  }

  h1::after {
    width: 60px;
    height: 2px;
  }

  .title {
    font-size: 22px;
  }

  .avatar {
    width: 80px;
    height: 80px;
  }

  .level-tag {
    font-size: 12px;
    padding: 5px 10px;
  }

  .user-header {
    flex-direction: column;
    text-align: center;
  }

  .user-info {
    margin-left: 0;
    margin-top: 15px;
    align-items: center;
  }

  .level-tag {
    align-self: center;
  }
}

.drawer-form {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.drawer-footer {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding: 20px 0;
}

/* 保持与原有样式一致 */
.el-form-item {
  margin-bottom: 22px;
}

.el-input {
  width: 100%;
}
</style>
